import { useEffect, useState } from 'react'
import axios from 'axios'

interface IDog {
  message: string
  status: string
}

interface IResquest<T> {
  data: T
}

function App() {
  const [dogSrc, setDogSrc] = useState('')

  // useEffect 的第二个参数，可以是一个空数组 ([])，
  // 表示只在组件第一次渲染后执行 effect
  // 使用场景：
  //    1. 事件绑定
  //    2. 发送请求获取数据 等

  // 第二个参数写成一个空数组以后，useEffect 只会在组件第一次渲染后执行
  // 因此可以执行事件绑定等只需要执行一次的操作
  // 此时：相当于 class 组件的 componentDidMount 钩子函数的作用

  useEffect(() => {
    async function getGog() {
      const res = await axios.get<IDog, IResquest<IDog>>('https://dog.ceo/api/breeds/image/random')
      setDogSrc(res.data.message)
    }
    getGog()
  }, [])

  // 组件中，useEffect Hook 也会被多次调用
  // 推荐：一个 useEffect 只能处理一个功能，有多个功能时，使用多次 useEffect
  // 这样可以根据业务逻辑拆分，将相同的业务逻辑放到一块，而不是根据生命周期拆分代码
  useEffect(() => {
    console.log('组件重新渲染，我就会执行')
  })

  return (
    <div>
      <h4>useEffect</h4>
      <img src={dogSrc} alt="狗子" />
    </div>
  )
}

export default App
